<template>
	<div>
		<el-button type="primary" @click="edit()">添加</el-button>
		<el-table :data="listData">
			<el-table-column label="ID" prop="id" align="center" />
			<el-table-column label="用户昵称" prop="nickname" align="center" ></el-table-column>
			<el-table-column label="头像" align="center"></el-table-column>
			<el-table-column label="操作" align="center">
				<template #default="{row}">
					<el-button type="primary" @click="edit(row)">编辑</el-button>
					<el-button type="danger" v-if="row.id != 1" @click="del(row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<uw-pagination :total="total" :limit="limit" :current-page="limit" />
		<uw-add-admin ref="refAddAdmin" v-model="showDialog" @change="updateList"></uw-add-admin>
	</div>
</template>

<script setup lang="ts">
	import { nextTick, onMounted, ref } from 'vue';
	import { getRolesListApi, addRoleApi, editRoleApi, deleteRoleApi, getPermissionsApi } from '@/api/api';
	import uwAddAdmin from './components/uw-add-admin.vue'
	const listData = ref([])
	const total = ref(0)
	const limit = ref(10)
	const currentPage = ref(1)
	const showDialog = ref(false)
	const refAddAdmin = ref()
	// getRoutes().then((res)=>{
	// 	console.log(res);
	// })
	const edit = (row:any)=>{
		showDialog.value = true
		console.log(refAddAdmin.value);
		nextTick(()=>{
			refAddAdmin.value.edit(row)
		})
	}
	const del = (row:any)=>{
		deleteRoleApi(row.id).then((res:any)=>{
			console.log(res);
			updateList()
		})
	}
	/**
	 * 获取管理员列表
	 */
	const getAdminList = async ()=>{
		const { data:{list,total}} = await getRolesListApi({
			page:currentPage.value,
			limit:limit.value,
			keyword:''
		})
		listData.value = list
		total.value = total
		console.log(listData.value);
	}
	/**
	 * 重新获取列表数据
	 */
	const updateList = () => {
		currentPage.value = 1
		getAdminList()
	}
	onMounted(()=>{
		getAdminList()
	})
</script>

<style>
	
</style>